<template>
	<button @click="handleScreenRecording">录制</button>
</template>

<script setup>
import { ref } from 'vue';

const videoChunks = ref([]);
const mediaRecorder = ref(null);

// 屏幕录制
const handleScreenRecording = async () => {
	if (!navigator.mediaDevices.getUserMedia) return;
	try {
		// 提示用户去选择和授权捕获展示的内容或部分内容（如一个窗口）
		const stream = await navigator.mediaDevices.getDisplayMedia({ video: true, audio: true });
		// 录制格式,判断限制选项中设定的参数是否支持
		const mimeType = MediaRecorder.isTypeSupported('video/webm;codecs=h264') ? 'video/webm;codecs=h264' : '';
		if (!mimeType) return;
		mediaRecorder.value = new MediaRecorder(stream, { mimeType });
		// 保存数据(数据有效)
		mediaRecorder.value.addEventListener('dataavailable', (e) => {
			videoChunks.value.push(e.data);
		});
		// 停止录制
		mediaRecorder.value.addEventListener('stop', () => {
			blobToFileSave(videoChunks.value);
			mediaRecorder.value = null;
			videoChunks.value.length = 0;
		});
		// 暂停录制
		mediaRecorder.value.addEventListener('pause', () => {
			console.log('暂停录制');
		});
		// 恢复录制
		mediaRecorder.value.addEventListener('resume', () => {
			console.log('恢复录制');
		});
		// 录制错误
		mediaRecorder.value.addEventListener('error', (err) => {
			console.log(err);
		});
		// 开始录制
		mediaRecorder.value.start();
	} catch (error) {
		console.log('选择和授权error', error);
	}
};

// 将blob数据转化为mp4格式，并保存到本地
const blobToFileSave = (blobData, type = 'video/mp4') => {
	const blob = new Blob(blobData, { type });
	const uri = window.URL.createObjectURL(blob);
	const a = document.createElement('a');
	document.body.appendChild(a);
	a.style.display = 'none';
	a.href = uri;
	a.download = +new Date() + '.mp4';
	// 下载文件
	a.click();
	// 释放内存
	window.URL.revokeObjectURL(uri);
	document.body.removeChild(a);
};
</script>
